<template>
  <VDialog @close="handleClose" @save="save" width="600px" :loading="loading">
    <template #content>
      <div class="content">
        <div
          class="base"
          :class="switchValue ? 'active' : ''"
          @click="switchValue = true"
        >
          <span>{{ formValue.y }}</span>
           <SvgIcon icon-class="SuccessFilled" v-if="switchValue"/>
        </div>
        <div
          class="base"
          :class="!switchValue ? 'active' : ''"
          @click="switchValue = false"
        >
          <span>{{ formValue.n }}</span>
          <SvgIcon icon-class="SuccessFilled" v-if="!switchValue"/>
        </div>
        <div class="flex text">
          <SvgIcon icon-class="HintFilled" class="mr-[4px]"/>
          <span>{{ formValue.tip }}</span>
        </div>
      </div>
    </template>
  </VDialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import api from "../../api/index";
import SvgIcon from "@/components/SvgIcon/index.vue";
const props = defineProps({
  ids: { type: Array, default: () => [] },
  type: { type: Number, default: 0 },
});
const list = {
  0: {
    tip: "",
    y: "",
    n: "",
  },
  1: {
    tip: "验证设备MAC地址时，用户时允许在系统存在记录的设备上登陆系统！",
    y: "验证",
    n: "不验证",
  },
  2: {
    tip: "验证专属链接时，用户只允许用个人专属链接登陆系统！",
    y: "验证",
    n: "不验证",
  },
  3: {
    tip: "不允许账号密码登陆的账号，只能使用扫码登陆！",
    y: "允许",
    n: "不允许",
  },
};
const formValue = computed(() => list[props.type]);
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);
const switchValue = ref(true);
const handleClose = async (refresh) => {
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
const save = async () => {
  try {
    loading.value = true;
    let apis = {
      1: api.verifyMac,
      2: api.verifyElink,
      3: api.verifyAccountLogin,
    };
    const { code, mesage } = await apis[props.type]({
      ids: props.ids,
      switch: switchValue.value,
    });
    if (code != 200) return ElMessage.error(mesage);
    ElMessage.success("设置成功！");
    handleClose(true);
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
</script>
<style lang="scss" scoped>
.content {
  align-items: center;
  margin: 20px;
}

.base {
  display: flex;
  width: 400px;
  justify-content: space-between;
  margin: 0 auto;
  border: 1px solid #dcdfe6;
  padding: 10px;
  align-items: center;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 10px;

  &.active {
    background-color: var(--base-table-header-bg-color);
    border: 1px solid #5098ff;
  }
}

.text {
  color: #9da1ad;
  padding-left: 60px;

  i {
    margin-top: 1px;
    margin-right: 2px;
  }

  span {
    font-size: 12px;
  }
}
</style>
